<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet"  href="../../static/layui/css/layui.css" data-th-href="@{/layui/css/layui.css}">
    <script src="../../static/layui/layui.js" data-th-src="@{/layui/layui.js}"></script>
    <script src="../../static/layui/extends/xmSelect/xm-select.js" data-th-src="@{/layui/extends/xmSelect/xm-select.js}"></script>
    <script data-th-replace="public::config"></script>
</head>
<body>
<form class="layui-form" >
    <input type="hidden" name="id" data-th-value="${account?.id}">
    <div class="layui-form-item" >
        <label class="layui-form-label">帐号</label>
        <div class="layui-input-inline">
            <input type="text" name="account" data-th-value="${account?.account}"  lay-verify="required" placeholder="请输入帐号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" data-th-attrappend="lay-verify=${account == null ? 'required':_}" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
           <div id="roles"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sub">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script data-th-inline="javascript" type="text/javascript">
     layui.config({
        base: '[(@{/extends/})]'
        }).extend({
         xmSelect: 'xmSelect/xm-select'
        });
    //Demo
    layui.use(['form','jquery','xmSelect'], function(){
        let {form,$,xmSelect} = layui;
        //拉取角色列表
        $.get("[(@{/account/role/{id}(id=${account?.id})})]",function (rs) {
           xmSelect.render({
                el: '#roles',
                data:rs
            })
        },'json')


        //监听提交
        form.on('submit(sub)', function(data){
            let roles = xmSelect.get("#roles",true);
            data.field.roleIds=roles.getValue().map(role=>role.value)
            $.ajax({
                id:'table_reload',
                url:/*[[@{/account}]]*/ '/save',
                type:'put',
                data:data.field,
                success:function (rs) {
                    if(rs.code == 0) {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.layer.msg(rs.msg,{icon:6});
                        parent.layui.table.reload('table_reload');
                    }else {
                        parent.layer.close(index);
                        parent.layer.msg(rs.msg,{icon:5});
                    }
                }
            })

        });
    });
</script>
</body>
</html>